<!DOCTYPE HTML>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>upm.io</title>
        <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
        <link rel="stylesheet" href="assets/js/libs/fancybox/jquery.fancybox.css" />
        <link rel="stylesheet" href="assets/css/bootstrap-switch.min.css" />
        <link rel="stylesheet" href="assets/css/main.css" />
    </head>
    <body class="page-project" data-page="createproject">
        <?php include("common-tpl/topnav.php") ?>
        <?php include("common-tpl/topstatus-project.php") ?>
        
        <div class="container ptm pbm">
            <!-- <div class="col-md-2">
                <div class="clearfix">
                    <div class="fn-left">
                        <h4>项目管理</h4>
                    </div>
                </div>
                <table class="table table-bordered">
                    <tr>
                      <td><a href="project-list.php">项目清单</a></td>
                    </tr>
                    <tr class="active">
                      <td><a href="project-create.php">创建项目</a></td>
                    </tr>
                </table>
            </div> -->
            <div class="col-md-12">
                <div class="row pbl">
                    <div class="col-md-12">
                        
                        <div class="step step_1" id="step_1" style="display:block">
                          <p class="ptl">输入项目基本信息</p>
                          <table class="table table-bordered">
                            <tr>
                              <td>项目编号</td>
                              <td><input type="text" class="form-control form_text" name="form_proj_number" id="form_proj_number"></td>
                              <td>项目名称</td>
                              <td><input type="text" class="form-control form_text" name="form_proj_name" id="form_proj_name"></td>
                            </tr>
                            <tr>
                              <td>项目所属</td>
                              <td><input type="text" class="form-control form_text" name="form_proj_belong" id="form_proj_belong"></td>
                              <td>资源池</td>
                              <td>
                                <select class="form-control form_select" name="form_proj_pool" id="form_proj_pool">

                                </select>
                              </td>
                            </tr>
                          </table>
                          <p class="ptm">项目描述</p>
                          <div>
                            <textarea class="form-control form_textarea" name="form_proj_dis" id="form_proj_dis" rows="3"></textarea>
                          </div>

                          <div class="ptl text-right">
                            <button type="button" class="btn btn-primary next" >下一步</button>
                            <button type="button" class="btn cancel" data-dismiss="modal">取消</button>
                          </div>
                        </div><!--//step1-->


                        <div class="step step_2" id="step_2" style="display:none">
                          <p class="ptl">服务规划</p>
                          <div class="bg-gray mtsm mbsm">
                            <button id="step_2_add_btn" class="btn btn-default" type="button">
                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                                添加
                            </button>
                            <button id="step_2_delete_btn" class="btn btn-default" type="button">
                                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                                删除
                            </button>
                          </div>

                          <table class="table table-bordered table-list">
                            <thead>
                                <tr>
                                    <td><input class="checked_all mrs" id="checked_all" type="checkbox"><label for="checked_all">全选</label></td>
                                    <td>服务标记</td>
                                    <td>组件</td>
                                    <td>版本</td>
                                    <td>实例数量</td>
                                    <td>直接访问入口</td>
                                    <td>自动愈合</td>
                                    <td>自动伸缩</td>
                                    <td>自动高可用</td>
                                </tr>
                            </thead>
                            <tbody>
                              <!--以下展示开关按钮样式用，初始没有-->
                              <!-- <tr>
                                <td><input class="form_checkbox mrs" type="checkbox"></td>
                                <td><input type="text" class="form-control input-sm" name="" id=""></td>
                                <td>
                                  <select class="form-control input-sm" id="">
                                  </select>
                                </td>
                                <td>
                                  <select class="form-control input-sm" id="">
                                  </select>
                                </td>
                                <td><input class="form-control form_number input-sm" value="1" type="number" max="8" min="1" /></td>
                                <td><input class="form-control" type="checkbox" name="my-checkbox" data-size="mini" checked="checked"></td>
                                <td><input class="form-control" type="checkbox" name="my-checkbox" data-size="mini" checked="checked"></td>
                                <td><input class="form-control" type="checkbox" name="my-checkbox" data-size="mini" checked="checked"></td>
                                <td><input class="form-control" type="checkbox" name="my-checkbox" data-size="mini" checked="checked"></td>
                              </tr> -->
                            </tbody>
                          </table>
                          <script type="text/x-jquery-tmpl" id="step2ListTemplate">
                            <tr>
                                <td><input name="step_2_checkbox" class="form_checkbox mrs" type="checkbox"></td>
                                <td><input type="text" class="form-control input-sm" name="${name_0}"></td>
                                <td>
                                  <select class="form-control input-sm" name="${name_1}">
                                  </select>
                                </td>
                                <td>
                                  <select class="form-control input-sm" name="${name_2}">
                                  </select>
                                </td>
                                <td><input class="form-control form_number input-sm" name="${name_3}" value="1" type="number" max="8" min="1" /></td>
                                <td><input class="form-control" type="checkbox" name="${name_4}" data-size="mini" checked="checked"></td>
                                <td><input class="form-control" type="checkbox" name="${name_5}" data-size="mini" checked="checked"></td>
                                <td><input class="form-control" type="checkbox" name="${name_6}" data-size="mini" checked="checked"></td>
                                <td><input class="form-control" type="checkbox" name="${name_7}" data-size="mini" checked="checked"></td>
                            </tr>
                          </script>

                                <!-- <td>${Component.name}</td>
                                <td>${type}</td>
                                <td>${version}</td>
                                <td>${node_num}</td>
                                <td>${entry_point}</td>
                                <td>${auto_healing}</td>
                                <td>${auto_scaling}</td>
                                <td>${high_available}</td> -->
                          <div class="ptl text-right">
                            <button type="button" class="btn btn-primary prev" data-dismiss="modal">上一步</button>
                            <button type="button" class="btn btn-primary next" data-dismiss="modal">下一步</button>
                            <button type="button" class="btn cancel" data-dismiss="modal">取消</button>
                          </div>
                        </div> <!--//step2--> 

                        <div class="step step_3" id="step_3" style="display:none">
                          <p class="ptl">服务规划</p>
                          <table class="table table-bordered table-list">
                            <thead>
                                <tr>
                                    <td>服务标记</td>
                                    <td>关联服务指向</td>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                          </table>

                          <script type="text/x-jquery-tmpl" id="step3ListTemplate">
                            <tr>
                                <td><span data-level="${level}">${data[0]}</span></td>
                                <td>
                                  <div class="btn-group" data-toggle="buttons">
                                  </div>
                                </td>
                            </tr>
                          </script>
                          <div class="ptl text-right">
                            <button type="button" class="btn btn-primary prev" data-dismiss="modal">上一步</button>
                            <button type="button" class="btn btn-primary next" data-dismiss="modal">下一步</button>
                            <button type="button" class="btn cancel" data-dismiss="modal">取消</button>
                          </div>
                        </div> <!--//step3--> 


                        <div class="step step_4" id="step_4" style="display:none">
                          <p class="ptl">项目信息确认</p>
                          <table class="table table-bordered">
                            <tr>
                                <td>项目编号</td>
                                <td><div class="form_proj_number"></div></td>
                                <td>项目名称</td>
                                <td><div class="form_proj_name"></div></td>
                                <td>项目所属</td>
                                <td><div class="form_proj_belong"></div></td>
                            </tr>
                            <tr>
                                <td>资源池</td>
                                <td><div class="form_proj_pool_name"></div></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                          </table>
                          <p class="ptl">项目描述</p>
                          <div class="border_1_ccc pam mbl">
                            <div class="form_proj_dis"></div>
                          </div>
                          <table class="table table-bordered table-list">
                            <thead>
                                <tr>
                                    <td>服务标记</td>
                                    <td>组件</td>
                                    <td>版本</td>
                                    <td>实例数量</td>
                                    <td>关联服务指向</td>
                                    <td>直接访问入口</td>
                                    <td>自动愈合</td>
                                    <td>自动伸缩</td>
                                    <td>自动高可用</td>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                          </table>
                          <script type="text/x-jquery-tmpl" id="step4ListTemplate">
                            <tr>
                                <td>${data[0]}</td>
                                <td>${data[1]}</td>
                                <td>${data[2]}</td>
                                <td>${data[3]}</td>
                                <td><div class="rel"></div></td>
                                <td>${data[4]}</td>
                                <td>${data[5]}</td>
                                <td>${data[6]}</td>
                                <td>${data[7]}</td>
                            </tr>
                          </script>
                          <div class="ptl text-right">
                            <button type="button" class="btn btn-primary prev" data-dismiss="modal">上一步</button>
                            <button type="button" class="btn btn-primary next" data-dismiss="modal">创建项目</button>
                            <button type="button" class="btn cancel" data-dismiss="modal">取消</button>
                          </div>
                        </div> <!--//step4--> 

                        
                    </div>
                    
                </div>
            </div>
        </div>

        <div class="modal fade" id="alert_pop" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">创建项目</h4>
                    </div>
                    <div class="modal-body">
                        <h2 class="txtC mbml">创建成功</h2>
                        <div class="form-group row txtC">
                            <div class="col-sm-12">
                                <a class="btn btn-primary" href="project-list.php">确定</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="alert_pop2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">取消创建</h4>
                    </div>
                    <div class="modal-body">
                        <h2 class="txtC mbml">确认取消创建项目吗？</h2>
                        <div class="form-group row txtC">
                            <div class="col-sm-12">
                                <a class="btn btn-primary" href="project-list.php">确定</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>







        <?php include("common-tpl/bottomtpl.php") ?>

        <script src="assets/js/seajs/sea.js"></script>
        <script type="text/javascript">
            seajs.use('seajs/compass.js');
        </script>
    </body>
</html>
